<template>
	<view class="explain-detail">
		<Loading v-if="loading">正在加载中呢</Loading>
		<template v-else>
			<view class="explain-detail-image">
				<image aria-label="您拍摄的图片" :src="explain.img" class="image-max-width" mode="aspectFill"></image>
			</view>
			<view class="explain-detail-content flex--col">
				<text class="text--secondary-dark">
					{{explain.content}}
				</text>
				<view class="explain-detail-function flex--row">
					<view class="explain-detail-address flex--row text--thirdary-dark">
							<image src="@/static/magic/address.svg" aria-label="当前定位" class="icon--middle"></image>
							<text class="text--thirdary-dark">{{explain.address}}</text>
					</view>
					<view v-show="!recorded">
						<image aria-label="添加到记录收藏" src="@/static/magic/star_line.svg" class="icon--middle" @click="addRecord" role="button" ></image>
					</view>
					<view v-show="recorded">
						<image src="@/static/magic/star_filled.svg" class="icon--middle"></image>
					</view>
					
				</view>
			</view>
			
		</template>
	</view>
</template>

<script>
	import * as RecordApi from "@/api/record/record.js"
	import Loading from "@/components/Loading/Loading.vue"
	import {REFRESH_RECORDS} from "@/core/constant/event.js"
	export default {
		components:{
			Loading
		},
		data() {
			return {
				loading:true,
				explain:null,
				recorded:false
			}
		},
		methods: {
			async addRecord(){
				if(this.recorded){
					return 
				}
				this.recorded = true
				await RecordApi.addRecord(this.explain)
				uni.$emit(REFRESH_RECORDS)
				uni.navigateBack()	
			},
			async getImageExplain(path){
				const location = {...this.$store.getters.userAddress}
				let address = "此时此刻联系不上定位信号"
				if(location){
					address = `${location.province}${location.city}${location.district}${location.street}${location.number}`
				}
				
				const params = {
					address:address,
					path:path
				}
				this.loading = true
				this.explain = await RecordApi.imageExplain(params)
				this.loading = false
			}
			
		},
		async onLoad(options){
			await this.getImageExplain(options.path)
		}
	}
</script>

<style lang="scss">
	
	page{
		width:100%;
		background:#fff;
		height:100vh;
	}
	
	.explain-detail{
		height:100vh;
	}
	
	
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 100;
		color:#333;
	}
	
	.explain-detail{
		position:relative;
	}
	
	.explain-detail-image{
		height:64vh;
		width:100vw;
		image{
			height:100%;
			width:100vw;
			border-radius: 0px 0px 10px 10px;
		}
	}
	
	.explain-detail-content{
		height:600rpx;
		@include border-four-roundings;
		position:absolute;
		transform:translate(-50%,-50%);
		left:50%;
		bottom:-20%;
		
		width:80%;
		
		background-color: #fff;
		padding:16px;
		margin:auto;
		gap:24px;
		
		text{
			letter-spacing: 0.6px;
			line-height:1.4;
			max-height:200px;
			overflow: scroll;
		}
	}
	
	.explain-detail-function{
		align-items: center;
		justify-content: space-between;
		
		.explain-detail-address{
			width:70%;
			align-items: center;
		}
	}

</style>
